<template>
  <div class="research-form">
    <div class="form-header">
      <h3>科研成果</h3>
      <el-button type="primary" @click="addAchievement">添加成果</el-button>
    </div>

    <el-empty v-if="achievements.length === 0" description="暂无科研成果" />

    <el-table :data="achievements" stripe>
      <el-table-column prop="type" label="成果类型" width="120">
        <template #default="{ row }">
          <el-select v-model="row.type" placeholder="类型">
            <el-option label="专利" value="专利" />
            <el-option label="SCI" value="SCI" />
            <el-option label="EI" value="EI" />
            <el-option label="其他" value="其他" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="成果标题">
        <template #default="{ row }">
          <el-input v-model="row.title" placeholder="成果标题" />
        </template>
      </el-table-column>
      <el-table-column prop="publishDate" label="发表时间" width="150">
        <template #default="{ row }">
          <el-date-picker
              v-model="row.publishDate"
              type="month"
              placeholder="选择月份"
              value-format="YYYY-MM"
          />
        </template>
      </el-table-column>
      <el-table-column prop="description" label="成果描述">
        <template #default="{ row }">
          <el-input v-model="row.description" placeholder="成果描述" />
        </template>
      </el-table-column>
      <el-table-column label="证明文件" width="150">
        <template #default="{ row }">
          <el-upload
              action="/api/upload"
              :show-file-list="false"
              :on-success="(res) => row.certificate = res.url"
          >
            <el-button type="primary" size="small">上传</el-button>
          </el-upload>
          <el-link
              v-if="row.certificate"
              :href="row.certificate"
              target="_blank"
              type="primary"
          >
            查看
          </el-link>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80">
        <template #default="{ $index }">
          <el-button
              type="danger"
              size="small"
              @click="removeAchievement($index)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  achievements: any[]
}>()

const emit = defineEmits(['update:achievements'])

// 添加科研成果
const addAchievement = () => {
  const newAchievement = {
    type: '专利',
    title: '',
    publishDate: '',
    description: '',
    certificate: ''
  }
  emit('update:achievements', [...props.achievements, newAchievement])
}

// 删除科研成果
const removeAchievement = (index: number) => {
  const newAchievements = [...props.achievements]
  newAchievements.splice(index, 1)
  emit('update:achievements', newAchievements)
}
</script>

<style scoped>
.research-form {
  padding: 0 20px;
}

.form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
</style>